<template>
  <div class="container">
    <el-tabs v-model="activeTab" type="border-card" class="tabs">
      <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.name" :name="item.name">
        <component :is="item.content" :name="item.name"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import TodoWork from './TodoWork.vue'

const activeTab = ref('待办')
const tabs = [
  {
    name: '待办',
    content: TodoWork
  },
  {
    name: '待签收',
    content: TodoWork
  },
  {
    name: '挂起',
    content: TodoWork
  },
  {
    name: '省网一窗办理',
    content: TodoWork
  }
]
</script>

<style lang="scss" scoped>
.container {
  display: flex;
}

.tabs {
  flex: 1;
}
</style>
